<template>
	<view class="content">
		<view class="wechat_login" v-if="!hasUserInfo">
			<form class="loginContent">
				<button class="avatar-wrapper">
					<image class="avatar"
						src="https://beauty-of-face.oss-cn-shanghai.aliyuncs.com/uniappImg/userAvatarUrl.png" />
				</button>
				<view class="btn-wrapper">
					<button class="bg-green btn1" open-type="getPhoneNumber"
						@getphonenumber="decryptPhoneNumber">手机号快捷登录</button>
				</view>
			</form>
		</view>
		<view class="wechat_login" v-if="hasUserInfo">
			<form class="loginContent">
				<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
					<image class="avatar"
						:src="formData.headPortrait ? formData.headPortrait : 'https://beauty-of-face.oss-cn-shanghai.aliyuncs.com/uniappImg/userAvatarUrl.png'" />
					<text class="loginLogoText" v-if="isShow">授权头像</text>
				</button>
				<view class="nameContent">
					<view class="title">昵称:</view>
					<input type="nickname" placeholder="请填写昵称" v-model="formData.nickName" />
				</view>
				<view class="btn-wrapper">
					<button class="bg-green btn1" @click="submitUserInfo">登录</button>
				</view>
			</form>
		</view>
	</view>
</template>
<script>
	import {
		weChatPhoneLogin,
		getUserInfo,
		editUserInfo
	} from '@/api/user.js';
	import uploadImage from '@/js_sdk/yushijie-ossutil/ossutil/uploadFile.js';

	export default {
		data() {
			return {
				formData: {
					nickName: null,
					headPortrait: null
				},
				userInfo: {},
				hasUserInfo: false,
				isShow: true
			};
		},
		methods: {
			decryptPhoneNumber(e) {
				this.getCode()
					.then(code => {
						this.getWxUser(e, code)
					})
			},
			getCode() {
				return new Promise((resolve, reject) => {
					uni.login({
						provider: 'weixin',
						success: res => {
							if (res.code) {
								resolve(res.code);
							} else {
								reject(new Error('获取用户登录码失败'));
							}
						},
						fail: err => {
							reject(new Error('登录失败: ' + JSON.stringify(err)));
						}
					});
				});
			},
			getWxUser(e, code) {
				const userInfo = {
					encryptedData: e.detail.encryptedData,
					iv: e.detail.iv,
					loginCode: code
				};
				console.log(userInfo)
				weChatPhoneLogin(userInfo)
					.then(res => {
						uni.setStorageSync('token', res.data)
						this.getUser();
					})
					.catch(err => console.error("登录失败:", err));
			},
			getUser() {
				getUserInfo().then(res => {
					this.userInfo = res.data;
					if (this.userInfo.headPortrait && this.userInfo.nickName) {
						uni.switchTab({
							url: '/pages/index/index'
						});
					} else {
						this.hasUserInfo = true;
					}
				});
			},
			onChooseAvatar(e) {
				this.formData.headPortrait = e.detail.avatarUrl;
			},
			submitUserInfo() {
				if (this.formData.nickName && this.formData.headPortrait) {
					this.uploadImage(this.formData.headPortrait);
				} else {
					uni.showToast({
						icon: "none",
						title: '请设置头像和昵称'
					});
				}
			},
			uploadImage(filePath) {
				uploadImage(filePath, 'avatars/', (url) => {
					this.formData.headPortrait = url;
					this.editUser();
				}, (error) => {
					uni.showToast({
						title: '头像上传失败: ' + error.message
					});
				});
			},
			editUser() {
				this.formData.id = this.userInfo.id
				this.formData.nickName = this.formData.nickName;
				this.formData.headPortrait = this.formData.headPortrait;
				editUserInfo(this.formData).then(() => {
					uni.switchTab({
						url: '/pages/index/index'
					});
				});
			}
		}
	};
</script>
<style lang="scss">
	.content {
		height: 100vh;
		background: linear-gradient(#ffe7d2, #ffffff) no-repeat;
		background-size: 100% 400rpx;
		background-position: top;
		// background: #fff;
		// background-image: url('https://beauty-of-face.oss-cn-shanghai.aliyuncs.com/uniappImg/loginBag.png');
		// background-size: 100% 100%; 
	}

	.avatar-container {
		position: relative;
		margin: 60rpx auto;
		width: 164rpx;
		height: 164rpx;
	}

	.avatar {
		width: 100%;
		height: 100%;
		border-radius: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		margin-top: 300rpx;
	}

	.upAvatar {
		position: absolute;
		bottom: 4rpx;
		right: 4rpx;
		width: 40rpx;
		height: 40rpx;
	}

	.btn-wrapper {
		margin-top: 86rpx;
		padding: 0 66rpx;

		button {
			width: 100%;
			height: 86rpx;
			line-height: 86rpx;
			margin-top: 500rpx;
			border-radius: 120rpx;
			font-size: 30rpx;

			&.btn1 {
				color: #fff;
				background-color: #D39D62;
			}

			&.btn2 {
				color: #666;
				border: 1px solid #D39D62;
			}
		}
	}

	.title-bar {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 36rpx;
		height: 43px;
	}

	.icon {
		position: absolute;
		left: 30rpx;
		top: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 86rpx;
		height: 86rpx;

		image {
			width: 50rpx;
			height: 50rpx;
		}
	}

	.avatar-wrapper {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background: none;
		color: inherit;
		border: none;
		padding: 0;
		font: inherit;
		cursor: pointer;
		outline: inherit;

		.avatar {
			height: 120rpx;
			width: 120rpx;
			border-radius: 20rpx;
		}
	}

	.avatar-wrapper::after {
		border: none;
	}

	.nameContent {
		display: flex;
		border-top: 1px solid #eee;
		padding: 20rpx 40rpx;

		width: 670rpx;
		height: 80rpx;
		margin: 60rpx auto;
		background: rgba(255, 255, 255, 0.6);
		border-radius: 14px;
		border: 1px solid #BFA88E;

		box-sizing: border-box;
		font-size: 28rpx;
		align-items: center;

		.title {
			width: 80rpx;
			margin-right: 40rpx;
		}
	}

	.loginLogo {
		height: 700rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		.loginContent {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			width: 100%;

			.loginLogoText {
				font-size: 24rpx;
				color: #828282;
				margin-top: 20rpx;
			}
		}
	}

	.loginBtn {
		width: 100%;

		.btn {
			width: 80%;
			border-radius: 20rpx;
			background-color: #ee3236;
			color: white;
		}
	}
</style>